<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE HTML>
<html>
  <head>
    <title>查找大夫</title>
    <%@ include file="/common/meta.jsp"%>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="${ctx}/css/reset.css"/>
	<link rel="stylesheet" href="${ctx}/css/seedoctors.css"/>
	<script type="text/javascript" src="${ctx}/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			// 地图和搜索结果框高度设置
			var mapheight = $(window).height();
			$('#mappanel').height(mapheight - 100 -32);
			$('#resultpanel').height(mapheight - 100 - 32);
			// 点击隐藏面板后地图和搜索结果框的设置
			$('#hideresult').click(function(){
				var pow = $('#map').css('marginRight');
				var parm = Math.pow(0,parseInt(pow));
				$('#map').css({marginRight : 320*parm });
				$('#results').toggle();
				$(this).css({right : 320*parm-parm });
			});
			// 改变浏览器窗口大小后对各面板大小的更改
			$(window).resize(function(){
				mapheight = $(window).height();
				$('#mappanel').height(mapheight - 100 -32);
				$('#resultpanel').height(mapheight - 100 - 32);
			});
			// 百度地图调用代码
			var map = new BMap.Map("mappanel");				// 创建Map实例
			var point = new BMap.Point(116.404, 39.915);    // 创建点坐标
			var opt = {anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(20, 50)};	// 设置控件位置
			map.addControl(new BMap.NavigationControl(opt));// 添加平移缩放控件
			map.addControl(new BMap.ScaleControl());		// 添加比例尺控件
			map.addControl(new BMap.OverviewMapControl());	// 添加缩略地图控件
			map.enableScrollWheelZoom();					// 启用滚轮放大缩小
			map.centerAndZoom(point,12);					// 初始化地图,设置中心点坐标和地图级别
			var local = new BMap.LocalSearch(map, {			// 用于搜索
				renderOptions: {map: map, panel: "resultpanel"}
			});
			var geolocation = new BMap.Geolocation();		// 浏览器定位，可定到点，但是不知道根据什么来的，
			geolocation.getCurrentPosition(function(r){		// 不是很准,且多数浏览器自动阻止获取位置，
			    if(this.getStatus() == BMAP_STATUS_SUCCESS){// 少数有提示
			        var mk = new BMap.Marker(r.point);		// 还有一种根据IP定位，最多定到市，比较准确，应该比较适合
			       	map.addOverlay(mk);
			        map.panTo(r.point);
			    }
			    else {
			        alert('Failed'+this.getStatus());
			    }
			});
			// 搜索
			$('#start').click(function startsearch() {
				var key = document.getElementById('searchkey').value;
				local.search(key);
			});
		});
	</script>
  </head>
  
  <body>
		<%@ include file="/common/userHead.jsp"%>
		<div class="wrap">
			<div class="map" id="map">
				<div class="title">
					<h2>医生搜寻</h2>
				</div>
				<div class="shadow"></div>
				<div id="mappanel"></div>
			</div>
			<div class="result" id="results">
				<div class="title">
					<h2 style="border-left:1px solid #dddddd;">结果面板</h2>
				</div>
				<div id="resultpanel" class="results"></div>
			</div>
			<a href="javascript:void(0)" id="hideresult" class="noresult"><b class="b1"></b><b class="b2"></b></a>
		</div>
	</body>
</html>
